<template>
    <div class="searchIndex">
        <common-header :params="params" @handSearch="handSearch" />
        <div class="searchMainBody">
            <search-condition :params="params" @clickSearchCondition="clickSearchCondition" @handerClearCondition="handerClearCondition" v-if="isShowCondition" />
            <div class="w">
                <div class="recommondsMain">
                    <div class="goodList">
                        <ul>
                            <li class="infinite-list-item" :key="dataArray.id" v-for="dataArray in arrayGoodsData">
                                <div class="goodItem" :key="index" :style="getItemStyle(index)" v-for="(item ,index) in dataArray" @click="goToDetial(item)">
                                    <img height="200px" :style="getImageStyle(index)" :src="item.skus[0].images.split(',')[0]" />
                                    <div class="mainPrice">
                                        <i class="mod_price_i">¥</i>
                                        <span class="mod_price">{{item.skus[0].price}}</span>
                                    </div>
                                    <div class="title">{{item.title}}</div>
                                </div>
                            </li>
                        </ul>
                        <el-skeleton style="width:100%;margin-top:15px;padding: 0px 10px" v-if="isShowGoodsLoading" :rows="30" animated />
                    </div>
                </div>
            </div>
        </div>
        <common-footer />
    </div>
</template>
<script lang="ts">
    import { Component, Vue } from 'vue-property-decorator'
    import _ from 'lodash';
    import Header from '@/components/portal-index/customer-portal/header/index.vue';
    import Footer from "@/components/portal-index/customer-portal/footer/index.vue";
    import SearchCondition from '@/components/portal-index/search/search-condition.vue';
    import CustomerApiActions from '@/components/api/customer-api-actions';
    @Component({
        components: {
            CommonHeader: Header,
            CommonFooter: Footer,
            SearchCondition: SearchCondition
        }
    })
    export default class SearchIndex extends Vue {
        public isShowCondition: boolean = false;
        public isShowCms: any = false;
        public params: any = {};
        public searchData = new Array < any > ();
        public recommondsData = new Array < any > ();
        public arrayGoodsData = new Array < any > ();
        public loading: boolean = false;
        public currentPage = 1;
        public isShowImage = true;
        public i = 0;
        public currentPageGoods = new Array < any > ();
        public canRun = true;
        public isShowGoodsLoading = true;
        public popularGoods = new Array < any > ();
        public paramList: any = new Array < any > ();
        public searchText: any = "";
        public itemStyle: any = {};
        public async created() {
            await this.getGoods();
        }
        public async getGoods() {
            if (!this.searchText) {
                this.searchText = this.$route.query.searchText;
                this.params.searchText = this.$route.query.searchText;
            }
            this.loading = true;
            let apiActions = new CustomerApiActions(this);
            let result: any = null;
            let categoryId = this.$route.query.categoryId;
            let data: any = await apiActions.getSpuEsListPage({
                title: this.searchText,
                categoryId: categoryId,
                pager: { pageSize: 50, currentPage: 1 },
                paramList: this.paramList
            });
            //获取规格参数模板
            let templateData = await apiActions.getParamsCid({ cid: categoryId });
            //找出需要搜索的参数
            let searchParams = templateData.data.filter(item => item.searching);
            result = _.cloneDeep(data);
            this.isShowCondition = false;
            searchParams.forEach(element => {
                let selectItems = element.segments.split(";");
                element.selectItems = selectItems
            });
            //JS使用Map去重
            let searchParamsArray = _.unionBy(searchParams, 'name');
            this.params.conditionData = searchParamsArray;
            this.params.paramList = this.paramList;
            this.$nextTick(() => {
                this.isShowCondition = true;
            });
            this.isShowGoodsLoading = false;
            if (result && result.data && result.data.rows && result.data.rows.length > 0) {
                let data: Array < any >= result.data.rows;
                this.searchData = data;
                this.currentPageGoods = result.data.rows;
                this.recommondsData = this.currentPageGoods.slice(0, 5);
                this.popularGoods = this.currentPageGoods.slice(15, 20);
                this.getArrayGoodsData();
            }
            this.canRun = true;
            this.loading = false;
        }
        public getArrayGoodsData() {
            let data: Array < any >= new Array < any > ();
            this.arrayGoodsData = new Array < any > ();
            let tempRecData: Array < any >= _.cloneDeep(this.searchData);
            for (let i = 0; i < tempRecData.length / 5; i++) {
                let rowData: Array < any >= tempRecData.slice(i * 5, (i + 1) * 5);
                data.push(rowData);
            }
            this.arrayGoodsData = data;
        }
        public async handSearch(searchText: any) {
            this.searchText = searchText;
            await this.getGoods();
        }
        public goToDetial(item: any) {
            let routeOne = this.$router.resolve({
                name: "detial",
                query: {
                    id: item.id
                }
            });
            window.open(routeOne.href, '_blank');
        }
        public async clickSearchCondition(paramList: Array < any > ) {
            let newArray = [...this.paramList, ...paramList];
            this.paramList = _.uniqBy(newArray, 'key');
            await this.getGoods();
        }
        public async handerClearCondition(key) {
            let newArray = new Array < any > ();
            this.paramList.forEach(item => {
                if (item.key !== key) {
                    newArray.push(item)
                }
            });
            this.paramList = newArray;
            await this.getGoods();
        }
        public getItemStyle(index) {
            if (index % 5 == 0) {
                return { 'margin-left': '0px', width: '100%' }
            }
            return { width: '100%' }
        }
        public getImageStyle(index) {
            if ((index + 1) % 5 == 0) {
                return { width: '100%' }
            }
            return { width: '95%' }
        }
    }
</script>
<style lang="less">
    .searchIndex {
        width: 100%;
        background-color: white;

        .searchMainBody {
            width: 100%;
            display: flex;
            justify-content: center;
            flex-direction: column;

            .recGoods {
                margin-left: 80px;

                ul {
                    border: 1px solid #ddd;
                    display: flex;
                    flex-direction: column;
                    margin: 0px;
                    padding: 0px;

                    li {
                        list-style-type: none;
                        display: flex;
                        margin: 0px;
                        padding: 0px;
                        margin-top: 10px;

                        .title {
                            width: 150px;
                            margin-left: 20px;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            overflow: hidden;
                        }

                        .mainPrice {
                            width: 190px;
                            margin-left: auto;
                            margin-right: auto;
                            margin-top: 15px;
                            display: flex;
                            justify-content: center;

                            .mod_price {
                                display: inline-block;
                                line-height: 18px;
                                height: 18px;
                                color: #e1251b;
                                font-size: 20px;
                                font-weight: 700;
                                font-family: arial, sans-serif;
                            }

                            .mod_price_i {
                                vertical-align: middle;
                                font-size: 12px;
                                font-weight: 700;
                                font-family: MicrosoftYahei-regular, Arial, Helvetica, sans-serif;
                                color: #e1251b;
                                font-style: normal;
                            }
                        }
                    }
                }
            }

            .w {
                width: 100%;
                display: flex;
                flex-direction: row;
                justify-content: center;

                .recommondsMain {
                    width: 80%;
                    display: flex;

                    .goodList {
                        flex-direction: row;
                        flex-wrap: wrap;
                        width: 100%;
                        display: flex;
                        justify-content: space-between;

                        ul {
                            display: flex;
                            flex-direction: column;
                            margin: 0px;
                            padding: 0px;
                            width: 100%;

                            li {
                                list-style-type: none;
                                display: flex;
                                margin: 0px;
                                width: 100%;
                                padding: 0px;
                                margin-top: 20px;
                            }
                        }

                        .goodItem {
                            height: 300px;
                            background: white;
                            width: 20%;
                            max-width: 250px;
                            cursor: pointer;

                            .title {
                                height: 48px;
                                width: 190px;
                                font-size: 14px;
                                line-height: 24px;
                                text-align: left;
                                color: #666;
                                -webkit-transition: color .2s ease;
                                transition: color .2s ease;
                                word-break: break-all;
                                overflow: hidden;
                                text-overflow: ellipsis;
                            }

                            .mainPrice {
                                width: 190px;
                                margin-left: auto;
                                margin-right: auto;
                                margin-top: 15px;

                                .mod_price {
                                    display: inline-block;
                                    line-height: 18px;
                                    height: 18px;
                                    color: #e1251b;
                                    font-size: 20px;
                                    font-weight: 700;
                                    font-family: arial, sans-serif;
                                }

                                .mod_price_i {
                                    vertical-align: middle;
                                    font-size: 12px;
                                    font-weight: 700;
                                    font-family: MicrosoftYahei-regular, Arial, Helvetica, sans-serif;
                                    color: #e1251b;
                                    font-style: normal;
                                }
                            }

                        }
                    }
                }
            }
        }
    }
</style>